import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { PBLCaseWorkshop } from "@/components/PBLCaseWorkshop";
import { TemplateLibrary } from "@/components/TemplateLibrary";
import { SmartCoursewareAssembly } from "@/components/SmartCoursewareAssembly";
import { STEMDiscovery } from "@/components/STEMDiscovery";
import { AssignmentTemplates } from "@/components/AssignmentTemplates";
import { SmartWritingCanvas } from "@/components/SmartWritingCanvas";
import { EliteStudyTracks } from "@/components/EliteStudyTracks";
import { ClassroomAnalytics } from "@/components/ClassroomAnalytics";
import { AIGradingAssistant } from "@/components/AIGradingAssistant";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Brain, FileText, Lightbulb, BookOpen, Sparkles, Target, Microscope, Zap, GraduationCap, Edit } from "lucide-react";
import { useRole } from "@/contexts/RoleContext";
import { useState } from "react";

const Discover = () => {
  const { role } = useRole();
  const [activeTab, setActiveTab] = useState("pbl-cases");
  const [mainTab, setMainTab] = useState("template-library");
  const [templateTab, setTemplateTab] = useState("all-templates");

  // Content for students
  const studentContent = {
    title: "Discover & Boost Your Learning",
    subtitle: "Unlock STEM projects, assignment templates, AI study help, and elite learning strategies from top universities.",
    tabs: [
      {
        value: "stem-discovery",
        label: "STEM Discovery",
        icon: Microscope,
        title: "STEM Discovery",
        subtitle: "Hands-on STEM Projects",
        description: "Explore practical experiments, hands-on tasks, and real-world problem-solving challenges tailored to STEM learners.",
        component: <STEMDiscovery />,
        priority: true
      },
      {
        value: "assignment-templates",
        label: "Assignment Templates",
        icon: FileText,
        title: "Assignment & Project Templates",
        subtitle: "Writing, Research & Creativity",
        description: "Access downloadable and editable templates for lab reports, presentations, essays, and research proposals. Fill out and submit online.",
        component: <AssignmentTemplates />
      },
      {
        value: "smart-writing-canvas",
        label: "Smart Writing Canvas",
        icon: Edit,
        title: "Smart Writing Canvas",
        subtitle: "AI-Powered Writing Workspace",
        description: "An intelligent workspace to draft, revise, and complete assignments with real-time AI feedback and dynamic prompts.",
        component: <SmartWritingCanvas />
      },
      {
        value: "elite-study-tracks",
        label: "Elite Study Tracks",
        icon: GraduationCap,
        title: "Elite Study Tracks",
        subtitle: "Global Learning Excellence",
        description: "Learn from curated learning flows from top universities. Discover how elite students structure weekly goals and project work.",
        component: <EliteStudyTracks />
      }
    ]
  };

  // Teacher tab configuration
  const teacherTabs = [
    {
      id: "pbl-cases",
      label: "PBL Cases",
      component: <PBLCaseWorkshop />
    },
    {
      id: "template-library",
      label: "Template Library",
      component: <TemplateLibrary />
    },
    {
      id: "smart-courseware",
      label: "Smart Courseware Assembly",
      component: <SmartCoursewareAssembly />
    },
    {
      id: "classroom-analytics",
      label: "Classroom Analytics",
      component: <ClassroomAnalytics />
    },
    {
      id: "ai-grading-assistant",
      label: "AI Grading Assistant",
      component: <AIGradingAssistant />
    }
  ];

  // Use student content by default if no role is set
  const content = role === 'teacher' ? null : studentContent;

  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Navbar />
      
      <main className="flex-1">
        <section className="bg-gradient-to-br from-blue-50 via-indigo-50 to-cyan-50 py-16">
          <div className="container mx-auto px-4 text-center">
            <Badge className="mb-4 bg-gradient-to-r from-blue-100 to-indigo-100 text-blue-700 border-blue-200">
              <Brain className="w-4 h-4 mr-1" />
              AI-Powered Discovery Tools
            </Badge>
            <h1 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
              {role === 'teacher' ? 'Discover & Create Educational Content' : content.title}
            </h1>
            <p className="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
              {role === 'teacher' 
                ? 'Explore PBL cases, design smart courseware, and access comprehensive educational templates through AI-powered tools.'
                : content.subtitle
              }
            </p>
          </div>
        </section>
        
        <section className="py-16 container mx-auto px-4">
          <div className="max-w-5xl mx-auto">
            {role === 'teacher' ? (
              <Tabs value={mainTab} onValueChange={setMainTab} className="w-full">
                <TabsList className="mb-8 grid grid-cols-3 gap-2">
                  <TabsTrigger value="template-library">Template Library</TabsTrigger>
                  <TabsTrigger value="smart-courseware">Smart Courseware</TabsTrigger>
                  <TabsTrigger value="smart-writing">Smart Writing</TabsTrigger>
                </TabsList>
                <TabsContent value="template-library">
                  <TemplateLibrary />
                </TabsContent>
                <TabsContent value="smart-courseware">
                  <SmartCoursewareAssembly />
                </TabsContent>
                <TabsContent value="smart-writing">
                  <SmartWritingCanvas />
                </TabsContent>
              </Tabs>
            ) : (
              // Student view - updated tabbed interface with tech-inspired blue theme
              <Tabs defaultValue={content.tabs[0].value}>
                <TabsList className="grid w-full grid-cols-4 mb-8 bg-blue-50 border border-blue-200">
                  {content.tabs.map((tab) => (
                    <TabsTrigger 
                      key={tab.value} 
                      value={tab.value} 
                      className={`data-[state=active]:bg-blue-600 data-[state=active]:text-white ${
                        tab.priority ? 'font-semibold' : ''
                      }`}
                    >
                      {tab.label}
                    </TabsTrigger>
                  ))}
                </TabsList>
                
                {content.tabs.map((tab) => {
                  const IconComponent = tab.icon;
                  return (
                    <TabsContent key={tab.value} value={tab.value}>
                      <Card className={`border-0 shadow-xl ${
                        tab.priority ? 'ring-2 ring-blue-500 ring-opacity-50' : ''
                      }`}>
                        <CardHeader className={`${
                          tab.priority 
                            ? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white' 
                            : 'bg-gradient-to-r from-blue-50 to-indigo-50'
                        }`}>
                          <div className="flex items-center gap-3 mb-2">
                            <div className={`w-12 h-12 ${
                              tab.priority 
                                ? 'bg-white bg-opacity-20' 
                                : 'bg-gradient-to-br from-blue-500 to-indigo-500'
                            } rounded-xl flex items-center justify-center`}>
                              <IconComponent className={`w-6 h-6 ${
                                tab.priority ? 'text-white' : 'text-white'
                              }`} />
                            </div>
                            <div>
                              <CardTitle className={`text-2xl ${
                                tab.priority ? 'text-white' : 'text-gray-900'
                              }`}>
                                {tab.title}
                                {tab.priority && (
                                  <Zap className="inline w-5 h-5 ml-2 text-yellow-300" />
                                )}
                              </CardTitle>
                              <Badge 
                                variant="secondary" 
                                className={`mt-1 ${
                                  tab.priority 
                                    ? 'bg-white bg-opacity-20 text-white border-white border-opacity-30' 
                                    : ''
                                }`}
                              >
                                {tab.subtitle}
                              </Badge>
                            </div>
                          </div>
                          <CardDescription className={`${
                            tab.priority ? 'text-blue-100' : 'text-gray-600'
                          }`}>
                            {tab.description}
                          </CardDescription>
                        </CardHeader>
                        <CardContent className="p-8">
                          {tab.component}
                        </CardContent>
                      </Card>
                    </TabsContent>
                  );
                })}
              </Tabs>
            )}
          </div>
        </section>
      </main>
      
      <Footer />
    </div>
  );
};

export default Discover;
